<template>
  <div class="BKJS">
    <div class="query">
      <el-form label-position="right" label-width="80px" :model="query">
        <el-form-item
          label="居民姓名:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-input v-model="query.residentName" size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="证件号码:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-input v-model="query.idCard" size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="报卡类型:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-select
            v-model="query.chronicType"
            filterable
            placeholder="请选择报卡类型"
            size="small"
            style="width: 100%"
          >
            <el-option label="冠心病" value="冠心病"> </el-option>
            <el-option label="慢阻肺" value="慢阻肺"> </el-option>
            <el-option label="高血压" value="高血压"> </el-option>
            <el-option label="糖尿病" value="糖尿病"> </el-option>
            <el-option label="脑卒中" value="脑卒中"> </el-option>
            <el-option label="慢性肾脏病" value="慢性肾脏病"> </el-option>
            <el-option label="肿瘤" value="肿瘤"> </el-option>
            <el-option label="微创介入" value="微创介入"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="处理结果:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-select
            v-model="query.status"
            filterable
            clearable
            placeholder="请选择处理结果"
            size="small"
            style="width: 100%"
          >
            <el-option label="未处理" value="0"> </el-option>
            <el-option label="已处理" value="1"> </el-option>
            <el-option label="无法处理" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="报卡日期:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-date-picker
            v-model="bkTime"
            style="width: 100%"
            size="small"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="setQueryTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="报卡状态:"
          style="display: inline-block; width: 33%; padding-right: 20px"
          v-if="false"
        >
          <el-select
            v-model="query.type"
            filterable
            clearable
            placeholder="请选择报卡状态"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          style="
            display: inline-block;
            width: 100%;
            padding-right: 20px;
            text-align: right;
          "
        >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="getList"
            >搜索</el-button
          >
          <el-button
            @click="init_query"
            size="small"
            plain
            icon="el-icon-refresh-right"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="main" v-loading="isLoading">
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 15px"
        :header-cell-style="{
          color: '#000',
          backgroundColor: 'rgb(157,201,210)',
          fontFamily: 'FangSong',
        }"
        height="470"
        border
      >
        <el-table-column
          prop="jdDate"
          label="停留未处理时间"
          fixed="left"
          width="200"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0" style="color: red"
              >{{ scope.row.createTime | jdDate }} 小时</span
            >
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="residentName" label="姓名"> </el-table-column>
        <el-table-column prop="gender" label="性别">
          <template slot-scope="scope">
            {{ scope.row.gender | gender }}
          </template>
        </el-table-column>
        <el-table-column prop="bkHosiptalName" label="填报单位">
        </el-table-column>
        <el-table-column prop="chronicType" label="报卡类型"> </el-table-column>
        <!-- <el-table-column prop="ys1" label="来源"> </el-table-column> -->
        <el-table-column prop="bkTime" label="报卡日期">
          <template slot-scope="scope">
            {{ scope.row.bkTime | time }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="处理结果">
          <template slot-scope="scope">
            {{ scope.row.status | status }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="statusReason" label="报卡状态">
        </el-table-column> -->
        <!-- <el-table-column prop="sc" label="档案状态"> </el-table-column> -->
        <el-table-column
          prop="date"
          label="操作"
          fixed="right"
          width="240"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == 0"
              type="primary"
              plain
              size="mini"
              style="background-color: #fff; color: rgb(47, 160, 254)"
              @click="open_dialog(scope.row, true)"
              >处理</el-button
            >
            <el-button
              v-if="scope.row.status != 0"
              type="primary"
              plain
              size="mini"
              style="background-color: #fff; color: rgb(47, 160, 254)"
              @click="open_dialog(scope.row, false)"
              >查看</el-button
            >
            <el-button
              v-if="scope.row.bkDoctorId == DoctorId"
              type="danger"
              plain
              size="mini"
              style="background-color: #fff; color: rgb(249, 107, 110)"
              @click="del_arr(scope.row.id)"
              >作废</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right; margin-top: 20px">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="query.Page"
          :page-size="query.Size"
          layout="prev, pager, next, jumper"
          :total="query.total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹层开始 -->
    <el-dialog
      title="报卡详情"
      :visible.sync="dialogVisible"
      width="97%"
      style="margin-top: -10vh"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div style="height: 71vh; overflow: auto">
        <BKXQ
          :chronicType="chronicType"
          :tid="tid"
          :info="info"
          v-if="dialogVisible"
        ></BKXQ>
      </div>
      <span slot="footer" class="dialog-footer">
        <span style="color: red">报卡机构分配：</span>
        <el-select
          v-model="row_info.ToHospitalId"
          filterable
          placeholder=""
          size="small"
        >
          <el-option
            v-for="item in jigou_1"
            :key="item.id"
            :label="item.unitName"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <span style="color: red; margin-left: 10px">处理备注：</span>
        <el-input
          style="width: 300px; margin-right: 10px"
          v-model="row_info.statusReason"
        ></el-input>
        <el-button type="primary" @click="btn_click(true)" v-if="isBtnShow"
          >接 收</el-button
        >
        <el-button type="danger" @click="btn_click(false)" v-if="isBtnShow"
          >无法处理</el-button
        >
        <el-button @click="handleClose">关 闭</el-button>
        <!--<el-button type="primary" @click="dialogVisible = false"
          >保 存</el-button
        > -->
      </span>
    </el-dialog>
    <!-- 弹层结束 -->
  </div>
</template>
    
    <script>
import BKXQ from "@/views/dialog_info/BKXQ.vue";
export default {
  components: {
    BKXQ,
  },
  data() {
    return {
      options: [],
      tableData: [],
      dialogVisible: false,
      isLoading: false,
      chronicType: "",
      tid: "",
      info: "",
      DoctorId: window.localStorage.getItem("doctorId"),
      bkTime: "",
      query: {
        Page: 1,
        Size: 10,
        total: 0,
        residentName: "",
        idCard: "",
        chronicType: "",
        status: "",
        type: "",
        bkTimeFrom: "",
        bkTimeTo: "",
      },
      row_info: {},
      isBtnShow: false,
      jigou_1: [],
    };
  },
  filters: {
    gender(val) {
      var str = "";
      if (val == 1) {
        str = "男";
      }
      if (val == 2) {
        str = "女";
      }
      if (val == 9) {
        str = "未知的性别";
      }
      if (val == 0) {
        str = "未说明的性别";
      }
      return str;
    },
    status(val) {
      var str = "";
      if (val == 0) {
        str = "未处理";
      }
      if (val == 1) {
        str = "已处理";
      }
      if (val == 2) {
        str = "无法处理";
      }
      return str;
    },
    time(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times = d.getFullYear() + "-" + month + "-" + day;
        return times;
      }
    },
    jdDate(val) {
      const date1 = new Date(val);
      const date2 = new Date();
      const diff = Math.abs(date2.getTime() - date1.getTime()); // 计算时间差，单位毫秒
      return Math.round((diff / (1000 * 60 * 60)) * 100) / 100; // 转换为小时
    },
  },
  mounted() {
    this.getList();
    this.getJg();
  },
  methods: {
    getJg() {
      this.$get(baseUrl.mbIp + "/api/NPatient/GetUnitOrgan").then((res) => {
        this.jigou_1 = res.Data;
      });
    },
    getList() {
      this.isLoading = true;
      this.$post("/mbBkMaster/PageList", this.query).then((res) => {
        this.isLoading = false;
        if (res.code != 200) {
          this.$notify.error({
            title: "错误",
            message: res.message,
          });
        } else {
          this.tableData = res.data.records;
          this.query.total = res.data.total;
        }
      });
    },
    open_dialog(row, flag) {
      this.isBtnShow = flag;
      this.chronicType = row.chronicType;
      this.tid = row.id + "";
      this.info = JSON.stringify(row);
      this.row_info = row;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.chronicType = "";
      this.info = "";
      this.tid = "";
    },
    del_arr(id) {
      this.$confirm("正在进行作废操作，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var that = this;
          this.$post("/mbBkMaster/delete?id=" + id).then((res) => {
            if (res.code == 200) {
              that.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
              });
              this.getList();
            } else {
              that.$notify.error({
                title: "错误",
                message: res.message,
              });
            }
          });
        })
        .catch(() => {});
    },
    handleCurrentChange(val) {
      this.query.Page = val;
      this.getList();
    },
    init_query() {
      this.query = {
        Page: 1,
        Size: 10,
        total: 0,
        residentName: "",
        idCard: "",
        chronicType: "",
        status: "",
        type: "",
        bkTimeFrom: "",
        bkTimeTo: "",
      };
      this.bkTime = "";
      this.getList();
    },
    setQueryTime() {
      this.query.bkTimeFrom = this.bkTime[0];
      this.query.bkTimeTo = this.bkTime[1];
    },
    btn_click(flag) {
      var body = this.row_info;
      if (flag) {
        body.status = 1; // 已处理
      } else {
        body.status = 2; // 无法处理
      }
      if (body.ToHospitalId) {
        for (var i in this.jigou_1) {
          if (this.jigou_1[i].id == body.ToHospitalId) {
            body.ToHospitalName = this.jigou_1[i].unitName;
          }
        }
      }
      this.$post("/mbBkMaster/modify", body).then((res) => {
        this.handleClose();
        this.getList();
      });
    },
    org_change(val) {
      console.log(val);
      this.row_info.parentOrgId = val[val.length - 1];
    },
  },
};
</script>
    
    <style scoped lang="scss">
.BKJS {
  padding: 20px;
  background-color: #fff;
  .query {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    margin-bottom: 10px;
  }
}
</style>